<!-- 文章管理页面 -->
<script setup>
import {ref} from 'vue'
// 图标需要导入
import {Delete ,Edit} from '@element-plus/icons-vue'
import ChannelSelect from './components/ChannelSelect.vue'
import { artGetManageService,artDelService } from '@/api/article.js'
import {formatTime} from '@/utils/format.js'
import ArticleEdit from './components/ArticleEdit.vue'
import { ElMessage } from 'element-plus'
// import type { DrawerProps } from 'element-plus'
const articleList=ref([
	// {
	//       "id": 5961,
	//       "title": "新的文章啊",
	//       "pub_date": "2022-07-10 14:53:52.604",
	//       "state": "已发布",
	//       "cate_name": "体育"
	//     },
	//     {
	//       "id": 5962,
	//       "title": "新的文章啊",
	//       "pub_date": "2022-07-10 14:54:30.904",
	//       "state": "草稿",
	//       "cate_name": "体育"
	//     }
])
const total=ref(0)
const loading=ref(false)

// //编辑逻辑
// const onEditArticle=(row)=>{
// 	console.log(row);
// }
//退产逻辑
const onDeleteArticle=async(row)=>{
	// console.log(row);
	await artDelService(row.id)
	ElMessage.success('删除成功')
	loading.value=true
	getManageList()
	loading.value=false
}
//分页逻辑
const cateId=ref(47529)  //默认是谷子的id

const handleSizeChange=(size)=>{
	// console.log('当夜条数',size)
	//分页数量变化时，从第一页开始进行渲染
	params.value.pagenum=1
	params.value.pagesize=size
	getManageList()
}

const handleCurrentChange=(page)=>{
	// console.log('页码变化了',page)
	//基于最新的当前页渲染数据
	params.value.pagenum=page
	getManageList()
}

//定义请求参数对象
const params=ref({
	pagenum:1,
	pagesize:5,
	cate_id:'',
	state:''
	
})
// 更新await加载数据
const getManageList=async()=>{
	//loading进行加载动画
	loading.value=true
	const res=await artGetManageService(params.value)
	console.log(res);
	articleList.value=res.data.data
	total.value=res.data.total
	loading.value=false  //结束动画
}
getManageList()

//搜索逻辑
const onSearch=()=>{
	params.value.pagenum=1  //重置页面
	getManageList()
}

//清空逻辑
const onReset=()=>{
	params.value.pagenum=1
	params.value.state=''
	params.value.cate_id=''
	getManageList()
}

const articleEditRef=ref()
//添加文章逻辑
const onAddArticle=()=>{
	// visibleDrawer.value=true
	articleEditRef.value.open({})
}
//编辑文章逻辑
//怎么想也想不到把row传递过去
const onEditArticle=(row)=>{
	articleEditRef.value.open(row)
}

//从子组件会传递状态过来
const onSuccess=(type)=>{
	if(type==='add'){
		//添加 -->渲染到最后一页
		const lastPage=Math.ceil((total.value+1)/params.value.pagesize)
		params.value.pagenum=lastPage
		getManageList()
	}else{
		//编辑，直接渲染到当前页面
		getManageList()
	}
}

</script>


<template>
	<!-- title配置标题  因为组件里面用了{{title}} -->
	<page-container title="文章管理">
		<!-- 这里使用具名的插槽 -->
		<template #extra>
			<el-button type="primary" @click="onAddArticle">添加文章</el-button>
		</template>
		<!-- 这里面就是slot默认插槽 -->
		<!-- 主题部分表格+分页 -->
		<!-- 表单区域 -->
		<el-form inline>
			<el-form-item label="文章分类">
				<!-- 调用的地方很多所以单独封装组件去了 -->
				<!-- 这里导入组件使用 -->
				<!-- vue2  v-model  :value和@input的简写 -->
				<!-- vue3  v-model  :modelValue 和 @update:modelValue的简写 -->
				<!-- 这里如果儿子想要使用就要在儿子那里定义props 和 emit提交事件 -->
				<channel-select v-model="params.cate_id"></channel-select>
			</el-form-item>
			<el-form-item label="发布状态">
				<el-select v-model="params.state" style="width: 150px;">
					<el-option label="已发布" value="已发布"></el-option>
					<el-option label="草稿" value="草稿"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSearch">搜索</el-button>
				<el-button @click="onReset">重置</el-button>
			</el-form-item>
		</el-form>
		
		<!-- 表格区域 -->
		<el-table :data="articleList" v-loading="loading">
			<el-table-column label="文章标题" prop="title">
				<template #default="{row}">
					<el-link type="primary" :underline="false">{{row.title}}</el-link>
				</template>
			</el-table-column>
			<el-table-column label="分类" prop="cate_name"></el-table-column>
			<el-table-column label="发表时间" prop="pub_date">
				<template #default="{row}">
					{{formatTime(row.pub_date)}}
				</template>
				
			</el-table-column>
			<el-table-column label="状态" prop="state"></el-table-column>
			<el-table-column label="操作" prop>
				<template #default="{row}">
					<el-button circle plain type="primary" :icon="Edit" @click="onEditArticle(row)"></el-button>
					<el-button circle plain type="danger" :icon="Delete" @click="onDeleteArticle(row)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 分页区域 -->
		<!-- <div class="demonstration">All combined</div> -->
		    <el-pagination
		      v-model:current-page="params.pagenum"
		      v-model:page-size="params.pagesize"
		      :page-sizes="[2, 3, 5, 10]"
		      :size="size"
		      :disabled="disabled"
		      :background="true"
		      layout="jumpertotal, sizes, prev, pager, next"
		      :total="total"
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
					style="margin-top: 20px; justify-content: flex-end;"
		    />
		
		<!-- 抽屉区域 -->
		<!-- 我们封装在components ArtileEdit.vue总方便数据共享 -->
		<!-- @success是注册事件，触发于子组件的emit -->
		<article-edit ref="articleEditRef" @success="onSuccess"></article-edit>
		    
		
	</page-container>
</template>

<style lang="scss" scoped></style>